"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Direction } from "./maze-generator";
import { useMobile } from "@/hooks/use-mobile";

type MazeControlsProps = {
  onMove: (direction: Direction) => void;
  onReset: () => void;
  onChangeDifficulty: (difficulty: "easy" | "medium" | "hard") => void;
  difficulty: "easy" | "medium" | "hard";
};

export function MazeControls({
  onMove,
  onReset,
  onChangeDifficulty,
  difficulty,
}: MazeControlsProps) {
  const isMobile = useMobile();
  const [showHelp, setShowHelp] = useState(false);

  return (
    <div className="w-full max-w-md mx-auto mt-6 space-y-4">
      <Tabs defaultValue={difficulty} onValueChange={(value) => onChangeDifficulty(value as any)}>
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="easy">简单</TabsTrigger>
          <TabsTrigger value="medium">中等</TabsTrigger>
          <TabsTrigger value="hard">困难</TabsTrigger>
        </TabsList>
      </Tabs>

      {isMobile && (
        <div className="grid grid-cols-3 gap-2 mt-4">
          <div className="col-start-2">
            <Button
              variant="outline"
              className="w-full aspect-square"
              onClick={() => onMove(Direction.UP)}
            >
              ↑
            </Button>
          </div>
          <div className="col-start-1 col-end-4 grid grid-cols-3 gap-2">
            <Button
              variant="outline"
              className="w-full aspect-square"
              onClick={() => onMove(Direction.LEFT)}
            >
              ←
            </Button>
            <Button
              variant="outline"
              className="w-full aspect-square"
              onClick={() => onMove(Direction.DOWN)}
            >
              ↓
            </Button>
            <Button
              variant="outline"
              className="w-full aspect-square"
              onClick={() => onMove(Direction.RIGHT)}
            >
              →
            </Button>
          </div>
        </div>
      )}

      <div className="flex justify-between">
        <Button onClick={onReset} variant="outline">
          重新开始
        </Button>
        <Button onClick={() => setShowHelp(!showHelp)} variant="outline">
          {showHelp ? "隐藏帮助" : "显示帮助"}
        </Button>
      </div>

      {showHelp && (
        <div className="p-4 bg-card rounded-lg border border-border mt-4">
          <h3 className="text-lg font-medium mb-2">如何玩</h3>
          <ul className="list-disc pl-5 space-y-1">
            <li>使用方向键或WASD键移动</li>
            <li>从绿色起点移动到粉色终点</li>
            <li>墙壁不能穿过</li>
            <li>移动轨迹会留下紫色痕迹</li>
            <li>手机用户可以使用屏幕上的方向按钮</li>
          </ul>
        </div>
      )}
    </div>
  );
}